<template>
	<view>
		<picker class="minutepicker" @change="HourMinuteChange" mode="multiSelector" :value="Index" :range="HourMinuteList">
			<view class="uni-input">{{Hour=='00' && Minute=='00'?placeholder:(Hour+":"+Minute)}}</view><input :name="name" type="text" class="hidden" :value="Hour=='00' && Minute=='00'?'':(Hour+':'+Minute)"></input>
		</picker>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				Index:[0,0],
				Hour:'00',
				Minute:'00',
				HourMinuteList:[],
			};
		},
		props:{
			name:{
				type:String,
				default:''
			},
			defaultValue:{
				type:String,
				default:''
			},
			placeholder:{
				type:String,
				default:''
			}
		},
		created(){
			var HourList=[], MinuteList=[];
			for(var i=0;i<=23;i++){HourList.push(i+"时");}
			for(var i=0;i<=59;i++){MinuteList.push(i+"分");}
			this.HourMinuteList.push(HourList);
			this.HourMinuteList.push(MinuteList);
			var strs=["00","00"];
			if(this.defaultValue!=''){
				strs=this.defaultValue.split(':');
			}
			this.Hour=strs[0];
			this.Minute=strs[1];
			this.Index=[this.Hour,this.Minute];
		},
		watch: {
			// 默认值
			defaultValue() {
				// 设置默认值
				var strs=["00","00"];
				if(this.defaultValue!=''){
					strs=this.defaultValue.split(':');
				}
				this.Hour= strs[0];
				this.Minute=strs[1];
				this.Index=[this.Hour,this.Minute];
			}
		},
		methods:{
			HourMinuteChange(e){
				var Hour=e.detail.value[0];
				var Minute=e.detail.value[1];
				this.Hour=Hour<10?'0'+Hour:Hour
				this.Minute=Minute<10?'0'+Minute:Minute;
				var value=this.Hour+":"+this.Minute;
				if(value=="00:00"){
					value="";
				}
				this.Index=[Hour,Minute];
				this.$emit("change",{
					value: value
				})
			}
		}
	}
</script>

<style lang="scss">

</style>
